:<template>
    <el-table :data="tableData" :height="height" class="body">
      <el-table-column label="ID" width="50">
        <template #default="scope">
          <div style="display: flex; align-items: center;font-size: 25px;cursor: pointer;">
            <i-bi-pause-circle v-if="playThisIndex===scope.row.id" @click="playAll(scope.row.id)"/>
            <i-bi-skip-end-circle v-else @click="playAll(scope.row.id)"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="picUrl" label="标题">
        <template #default="scope">
          <div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <div style="flex-basis: 40px;">
              <el-avatar style="width: 40px; height: 40px;" :src="scope.row.coverImgUrl" shape="square" fit="fill" />
            </div>
            <div style="margin-left: 10px; display: flex;flex-grow: 1; flex-direction: column;">
              <span class="inline-singer">{{ scope.row.name }} </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="创建人" width="110">
      </el-table-column>
      <el-table-column prop="osText" label="播放设备" width="80" />
      <el-table-column prop="playTime" label="播放时间" width="160" :formatter="timeFormat">
      </el-table-column>
    </el-table>
</template>
<script setup lang="ts">
import { computed } from "vue";
import {usePlayStore} from '@/store/PlayStore'
import util from '@/tools/util'
import emitter from '@/store/emitter'
import {playlistdetail} from '@/assets/apis/http'
import { Song } from "@/assets/apis/MusicDataType"

const playstore = usePlayStore()
defineProps(['tableData','height'])
let playThisIndex =computed(()=>{
  if (playstore.isPlayed){
    return playstore.playListId
  }else{
    return 0
  }
})

function timeFormat(row) {
  const date = new Date(row.playTime);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
async function playAll (id:number){
  //如果暂停之前正处于播放当前歌单，仅仅是切换播放状态
  if (playstore.playListId === id) {
    emitter.emit('playAudioType','play')
    return
  }
  let res = await playlistdetail({ id: id, s: 0 });
  // console.log("查询榜单内歌曲",res)
  let newSongs: Song[] = res.playlist.tracks.map(song => {
    return {
      id: song.id || null,
      name: song.name || '未知',
      mvId: song.mv,
      albumPic: util.formatSongsPic(song.al.picUrl,100),
      singer: song.ar.map(({ name, id }) => ({ name, id })),
      album: song.al.name,
      alia: song.alia[0],
      duration: song.dt,
      url: "https://music.163.com/song/media/outer/url?id="+song.id+".mp3",
      fee: song.fee,
      publishTime: song.mark
    };
  });
  playstore.playAll(newSongs)
  playstore.playListId = id
}
function toTSinger(id){
  console.log("查询歌手",id)
}
</script>
<style scoped lang="scss">
.body{
  width: 100%;
}
:deep(.el-table__inner-wrapper) {
  --el-table-tr-bg-color: transparentize;
  --el-table-header-bg-color: transparentize;
  tr {
    border-radius: 8px;
    .el-table__row{
      border-radius: 10px;
      cursor: pointer;
    }
  }
  .el-table__body-wrapper .el-table__body tr:hover td {
    background-color: var(--transparent-1);
  }
}
.inline-singer{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  .vip{
    color: var(--el-color-error);
    padding: 0 4px 2px 4px;
    border-radius: 5px;
    margin-right: 10px;
    border: inset 1px var(--el-color-error);
  }
}
</style>
